<template>
    <div class="fillcontain">
        <head-top></head-top>
        <el-tabs type="border-card">
            <el-tab-pane label="转班列表">转班列表</el-tab-pane>
            <el-tab-pane label="转班记录">转班记录</el-tab-pane>
        </el-tabs>
        <div class="">
            <el-select size="mini" class="input-buttion" v-model="value" placeholder="原校区">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select size="mini" class="input-buttion" style="width:120px;" v-model="value" placeholder="原老师">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select size="mini" class="input-buttion" v-model="value" placeholder="请选择上课时间">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-input size="mini"
                      style="width: 120px;"
                      class="input-buttion"
                      placeholder="姓名"
                      prefix-icon="el-icon-search"
                      v-model="input21">
            </el-input>
            <el-input
                size="mini"
                style="width: 100px;"
                class="input-buttion"
                placeholder="条数"
                prefix-icon="el-icon-search"
                v-model="input21">
            </el-input>
        </div>

        <div class="">
            <el-select size="mini" class="input-buttion" v-model="value" placeholder="现校区">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select size="mini" class="input-buttion" style="width:120px;" v-model="value" placeholder="现老师">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select size="mini" class="input-buttion" v-model="value" placeholder="现上课时间">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-input size="mini"
                      style="width: 120px;"
                      class="input-buttion"
                      placeholder="姓名"
                      prefix-icon="el-icon-search"
                      v-model="input21">
            </el-input>
            <el-input
                size="mini"
                style="width: 100px;"
                class="input-buttion"
                placeholder="条数"
                prefix-icon="el-icon-search"
                v-model="input21">
            </el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="user_name"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subject"
                    label="原校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="原老师"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="school"
                    label="原时段"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="现校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="现老师"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="现时段"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="转校时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="操作"
                    min-width="10%">
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {getUserList, getUserCount} from '@/api/getData'

    export default {
        data() {
            return {
                tableData: [{
                    registe_time: '2016-05-02',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1518 弄'
                }, {
                    registe_time: '2016-05-04',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1517 弄'
                }, {
                    registe_time: '2016-05-01',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1519 弄'
                }, {
                    registe_time: '2016-05-03',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1516 弄'
                }],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
        },
        created() {
            this.initData();
        },
        methods: {
            async initData() {
                try {
                    const countData = await getUserCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    } else {
                        throw new Error('获取数据失败');
                    }
                    this.getUsers();
                } catch (err) {
                    console.log('获取数据失败', err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            async getUsers() {
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
